import { defineComponent, h } from 'vue';
import NationTemplate from '../NationTemplate';
export default defineComponent({
  name: 'LeftSlide',
  props: {
    nations: {
      type: Array,
      default: () => [],
    },
    continental: {
      type: String,
      default: '',
    },
  },
  methods: {
    genContent() {
      let children = [];
      for (let i = 0; i < this.nations.length; i++) {
        children.push(
          h(
            NationTemplate,
            {
              key: 'nation-' + i,
              continental: this.continental,
            },
            {
              default: () => this.nations[i],
            }
          )
        );
      }
      return h(
        'div',
        {
          class: 'f-nation-grid',
        },
        children
      );
    },
  },
  render() {
    let children;
    if (this.$slots.default) {
      children = this.$slots.default({
        Component: this.genContent(),
      });
    } else {
      children = this.genContent();
    }
    return children;
  },
});
